//生产管理系统/报警管理/当日报警

import React, { Component } from 'react';
import { connect } from 'dva';
import {  Card, Pagination,Icon,Divider,Table,Dropdown,Menu,Progress   } from 'antd';

import style from './DataAlarm.less';
import {AlarTodayQuery} from '../../../services/redmoe';
//引入字体图标组件
import MyIcon from '../../../components/common/MyIcon';
import moment from "moment";
import request from "../../../utils/request";
import publicService from "../../../services/PublicService"
//tab切换套件


function callback(key) {
    console.log(key);
}
//下拉套件
const options = [{
    value: 'zhejiang',
    label: 'Zhejiang',

}, {
    value: 'jiangsu',
    label: 'Jiangsu',

}];

//日期选择器套件


function onChange(date, dateString) {
    console.log(date, dateString);
}


class DataAlarm extends Component {
    state = {
        tableLoading:false,
        page:1,
        rows:10,
        rowCount:0,
        commonText:0,
        importText:0,
        dataSource :[],
          columns :[{
            title: '序号',
            dataIndex: 'num',
            key: 'num',
            align:'center'
          }, {
            title: '报警设备/点位名称',
            dataIndex: 'site',
            key: 'site',
            align:'center'
          }, {
            title: '报警时间',
            dataIndex: 'createTime',
            key: 'createTime',
            align:'center'
          },{
            title: '报警级别',
            dataIndex: 'rank',
            key: 'rank',
            align:'center'
          }, {
            title: '报警信息',
            dataIndex: 'monitorName',
            key: 'monitorName',
            align:'center'
          }, {
            title: '操作',
            dataIndex: 'caozuo',
            key: 'caozuo',
            align:'center',
            render:(text,record,index) =>
             <span onClick={this.details.bind(this,record)}><MyIcon
             type="icon-chakan1"
            className={style.MyIcon_chakan1}
            style={{color:"#31E0A0"}}
            /> </span>,
           
          }
        ]
    };
    //进入页面
    componentDidMount () {
        var endDate = moment(new Date()).format("YYYY-MM-DD")
        var startDate = moment(new Date()).format("YYYY-MM-DD")
        let data = {
            endTime:`${endDate} 23:59:59`,
            startTime:`${startDate} 00:00:00`,
            page:1,
            rows:10
        }
        AlarTodayQuery({...data}).then(data => {
            console.log(data)
            if(data.data.rc == 0) {
                data.data.ret.xinxishuju.items.forEach(item => {
                   item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                })
                this.setState({
                    dataSource:data.data.ret.xinxishuju.items,
                    rowCount:data.data.ret.xinxishuju.rowCount,
                    commonText:data.data.ret.tuxingshuju[0].value,
                    importText:data.data.ret.tuxingshuju[1].value
                })
            }
        })
    }
    //点击查看跳转事件
    details = (record) => {
        console.log(record)
        this.props.history.push("/controlSubject/AlarmManagement/DetailsAlarm")
        publicService.setCookie('DetailsId', record.id);
    }
    //分页器事件
    onShowSizeChange = (page,rows) => {
      
        this.setState({
            page:page,
            rows:rows,
            tableLoading:true,
          
        })
        setTimeout(() => {

            var endDate = moment(new Date()).format("YYYY-MM-DD")
            var startDate = moment(new Date()).format("YYYY-MM-DD")
            let data = {
                endTime:`${endDate} 23:59:59`,
                startTime:`${startDate} 00:00:00`,
                page:page,
                rows:rows
            }
            AlarTodayQuery({...data}).then(data => {
                console.log(data)
                if(data.data.rc == 0) {
                    data.data.ret.xinxishuju.items.forEach(item => {
                       item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                    })
                    this.setState({
                        dataSource:data.data.ret.xinxishuju.items,
                        rowCount:data.data.ret.xinxishuju.rowCount,
                        commonText:data.data.ret.tuxingshuju[0].value,
                        importText:data.data.ret.tuxingshuju[1].value,
                        tableLoading:false
                    })
                }
            })

        },300)
    }
    Pagination = (page,pageSize) => {
        this.setState({
            page,
            rows:pageSize,
            tableLoading:true
        })
        console.log(page,pageSize)

        setTimeout(() => {

            var endDate = moment(new Date()).format("YYYY-MM-DD")
            var startDate = moment(new Date()).format("YYYY-MM-DD")
            let data = {
                endTime:`${endDate} 23:59:59`,
                startTime:`${startDate} 00:00:00`,
                page:page,
                rows:pageSize
            }
            AlarTodayQuery({...data}).then(data => {
                console.log(data)
                if(data.data.rc == 0) {
                    data.data.ret.xinxishuju.items.forEach(item => {
                       item.createTime = moment(item.createTime).format("YYYY-MM-DD HH:mm:ss")
                    })
                    this.setState({
                        dataSource:data.data.ret.xinxishuju.items,
                        rowCount:data.data.ret.xinxishuju.rowCount,
                        commonText:data.data.ret.tuxingshuju[0].value,
                        importText:data.data.ret.tuxingshuju[1].value,
                        tableLoading:false
                    })
                }
            })

        },100)

    }
    //导出
    derive = (e) => {
        if(e.key == "item_0"){
            //导出本页
            let endDate = `${moment(new Date()).format("YYYY-MM-DD")} 23:59:00`
            let startDate = `${moment(new Date()).format("YYYY-MM-DD")} 00:00:00`
            window.location.href = `hh-management-web/gnhj/alarm/theAlarmExcelExport?page=${this.state.page}&rows=${this.state.rows}&isAll=${true}&endTime=${endDate}&startTime=${startDate}`

        }
        if(e.key == "item_1"){
            //导出全部
            let endDate = `${moment(new Date()).format("YYYY-MM-DD")} 23:59:00`
            let startDate = `${moment(new Date()).format("YYYY-MM-DD")} 00:00:00`
            window.location.href = `hh-management-web/gnhj/alarm/theAlarmExcelExport?page=${this.state.page}&rows=${this.state.rows}&isAll=${false}&endTime=${endDate}&startTime=${startDate}`
        }
    }
  
     render() {
        const menu = (
            <Menu>
              <Menu.Item onClick={this.derive}>
                本页
              </Menu.Item>
              <Menu.Item onClick={this.derive}>
                全部
              </Menu.Item>
             
            </Menu>
          );
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(
                    `selectedRowKeys: ${selectedRowKeys}`,
                    "selectedRows: ",
                    selectedRows
                );
                this.setState({
                  row:selectedRows
                })
               
            },
            getCheckboxProps: record => ({
                disabled: record.name === "Disabled User", // Column configuration not to be checked
                name: record.name
            })
        };
        return (
            <div>
                        <Card
                            className={style.CardTop}
                            bodyStyle={{paddingTop:"0.5vh",paddingBottom:"0"}}
                        > 
                        <div style={{float:'left',marginRight:50,position:'relative',width:130}}  >
                        <Progress type="circle" percent={100} width={"6vh"}  className={style.circle1} status="exception" format={() => '100%'}/>
                        <p className={style.Pro_P}>当日报警</p>
                        <p className={style.Pro_Pspan} style={{color:"red"}}><span>{this.state.commonText+this.state.importText}</span>个</p>
                        <Divider type="vertical" />
                        </div>



                        <div style={{float:'left',marginRight:50,position:'relative',width:130}}>
                        <Progress type="circle" format={percent => `${percent} %`}  percent={Math.round((this.state.commonText/(this.state.commonText+this.state.importText))*100)} width={"6vh"} className={style.circle2} />
                        <p className={style.Pro_P}>普通报警</p>
                        <p className={style.Pro_Pspan} style={{color:"#2EC2FF"}}><span>{this.state.commonText}</span>个</p>
                        <Divider type="vertical" />
                        </div>



                        <div style={{float:'left',marginRight:50,position:'relative',width:130}}>
                        <Progress type="circle"format={percent => `${percent} %`} status="active" percent={Math.round((this.state.importText/(this.state.commonText+this.state.importText))*100)} width={"6vh"} className={style.circle3}/>
                        <p className={style.Pro_P}>重要报警</p>
                        <p className={style.Pro_Pspan} style={{color:"#215EAC"}}><span>{this.state.importText}</span>个</p>
                        <Divider type="vertical" />
                        </div>

                        </Card>
                        <Card
                            className={style.CardBottom}
                            bodyStyle={{paddingTop:"0.5vh",paddingBottom:"0"}}
                        >
                            <Dropdown overlay={menu}>
                            <span>
                            <MyIcon
                                type="icon-webicon320"
                                className={style.MyIcon_webicon320}
                            />
                                导出 <Icon type="down" />
                            </span>
                              
                            
                              
                            </Dropdown>
                            <div className={style.myTable}>
                            <Table
                            style={{width:this.state.repairWidth}}
                            onChange={this.rowSelection}
                            loading={this.state.tableLoading}
                            columns={this.state.columns}
                            dataSource={publicService.transformArrayData(this.state.dataSource,true,true)}
                            align="center"
                            className={style.Table}
                            bordered={true}
                            pagination={false}
                            size="small"
                        />
                        </div>
                            <Pagination showQuickJumper defaultCurrent={1} total={this.state.rowCount} onChange={this.Pagination}
                            className={style.Pagination}
                            showSizeChanger
                            onShowSizeChange={this.onShowSizeChange}
                            size='small'
                            />

                        </Card>
            </div>
        )
    }
}

export default connect()(DataAlarm)